<script setup>

import index from "vuex";
import router from "@/router";
</script>

<template>
  <!--基本信息-->
  <el-card style="height: 160px;margin-bottom: 20px;border: none;" shadow="never">
    <el-row>
      <el-col :span="4">
        <el-avatar :size="120" src=""></el-avatar>
      </el-col>
      <el-col :span="14" style="padding-left: 20px;">
        <div>
          <a href="/personal/info" style="font-size: 20px;text-decoration: none;color: #333333;">用户名（默认手机号）</a>
          <img src="/imgs/personal/reg-user-icon.png" style="position: relative;top: 3px;left: 10px;">
        </div>
        <div style="font-size: 14px;margin: 20px 0;">
          账户安全：
          <span
              style="font-size: 12px;
              display: inline-block;
              width: 70px;
              text-align: center;
              background-color: #e6e6e6;
              margin-right: 5px;">弱
          </span>
          <span
              style="font-size: 12px;
              display: inline-block;
              width: 70px;
              text-align: center;
              background-color: #e6e6e6;
              margin-right: 5px;">中
          </span>
          <span
              style="font-size: 12px;
              display: inline-block;
              width: 70px;
              text-align: center;
              background-color: #e6e6e6;
              margin-right: 5px;">强
          </span>
          <a href="/personal/safe" style="color: #333333;position: relative;top: 2px;">
            <el-icon size="14"><Edit/></el-icon>
          </a>
        </div>
        <div>
          <a href="/personal/authentication_1" style="margin-right: 30px;text-decoration: none;color: #999999;">
            <el-icon size="14" style="position: relative;top: 3px;"><Iphone /></el-icon>
            <span style="font-size: 12px;margin-left: 3px;">更改手机</span>
          </a>
          <a href="/personal/authentication_2" style="text-decoration: none;color: #999999;">
            <el-icon size="14" style="position: relative;top: 3px;"><Message /></el-icon>
            <span style="font-size: 12px;margin-left: 3px;">绑定邮箱</span>
          </a>
        </div>
      </el-col>
      <el-col :span="6" style="border-left: 1px solid #e6e6e6">
        <div style="position: relative;left: 50px;top: 30px;">
          <el-icon size="18" style="margin-right: 5px;position: relative;top: 3px;"><Coin /></el-icon>
          <span style="margin-right: 16px;">积</span><span>分：</span>
          <a href="" style="text-decoration: none;color: hotpink">0.00 万</a>
        </div>
        <div style="position: relative;left: 50px;top: 50px;">
          <el-icon size="18" style="margin-right: 5px;position: relative;top: 3px;"><CreditCard /></el-icon>
          <span style="margin-right: 10px;">优惠券：</span>
          <a href="" style="text-decoration: none;color: hotpink">0 张</a>
        </div>
      </el-col>
    </el-row>
  </el-card>
  <hr>
  <!--近期订单、近期收藏-->
  <!--el-table :data="recentOrders" v-if="activeMenu === 'recentOrders'"-->
  <!--div :data="recentCollections" v-if="activeMenu === 'recentCollections'"-->
  <el-card style="height: 100%;border: none;" shadow="never">
    <el-menu :default-active="activeMenu" @select="handleSelect" mode="horizontal">
      <el-menu-item index="recentOrders">近期订单</el-menu-item>
      <el-menu-item index="recentCollections">近期收藏</el-menu-item>
    </el-menu>
    <!--与recentOrders绑定的内容-->
    <el-row>
      <el-col :span="18">订单编号：</el-col>
      <el-col :span="6">下单日期：</el-col>
    </el-row>
    <el-table>
      <el-table-column prop="info" label="产品信息" align="center"></el-table-column>
      <el-table-column prop="depDate" label="出发日期" align="center"></el-table-column>
      <el-table-column prop="amount" label="订单金额" align="center"></el-table-column>
      <el-table-column prop="status" label="订单状态" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <el-button type="primary" size="small" @click="router.push('/personal/orderDetail')">详情</el-button>
      </el-table-column>
    </el-table>
    <br>
    <a href="/personal/order"
       style="display: block;text-decoration: none;color: #999999;font-size: 12px;float: right;">更多订单 >
    </a>
    <!--与recentCollections绑定的内容-->
    <div style="height: 100px;border-bottom: #e6e6e6 1px solid;">
      <el-row :gutter="10">
        <el-col :span="4">
          <img src="" style="width: 90px;height: 66px;position: relative;top: 17px;left: 20px;">
        </el-col>
        <el-col :span="15">
          <p>
            <a href=""
               style="display: block;line-height: 20px;font-size: 15px;color: #333;text-decoration: none;
                      height: 50px;">
              产品标题
            </a>
            <b style="font-weight: normal;font-size: 14px;color: #999999;">
              <el-icon
                  style="position: relative;top: 2px;color: orange;" size="16"><LocationFilled />
              </el-icon>
              北京出发
            </b>
          </p>
        </el-col>
        <el-col :span="5">
          <div class="price" style="margin: 0 auto;height: 100px;">
            <span style="font-size: 14px;color: orange;position: relative;top: 25px;left: 40px;">
              ￥
              <b style="font-size: 24px;">8888</b>
              起
            </span>
            <br>
            <el-button type="danger" size="small"
                       style="position: relative;top: 30px;left: 60px;">删除
            </el-button>
          </div>
        </el-col>
      </el-row>
    </div>
    <br>
    <a href="/personal/collection"
       style="display: block;text-decoration: none;color: #999999;font-size: 12px;float: right;">更多收藏 >
    </a>
  </el-card>

</template>

<style scoped>

</style>